<template>
  <div class="list-wrapper">
    <h4 class="list-title">用户管理</h4>
    <div class="list-hd">
      <div class="list-search">
        <input type="text" placeholder="请输入用户名或昵称" v-model="userSearch"/>
        <button @click="handleSel(1)">查询</button>
      </div>
      <router-link to="/admin/useradd"><button class="add_user">增加用户</button></router-link>
    </div>
    <div class="list-bd">
        <table border="1" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th>序号</th>
              <th>用户头像</th>
              <th>用户名</th>
              <th>用户昵称</th>
              <th>是否删除</th>
              <th>操作</th>
            </tr>
          </thead>
          <tr v-for="(list,index) in userlist" :key="index">
            <td>{{ list.id }}</td>
            <td><div class="list-avatar"><img :src="list.head_img" alt="" width="40" height="40"/></div></td>
            <td>{{ list.user_account }}</td>
            <td>{{ list.nickname }}</td>
            <td v-if="list.del==0"><span class="user_show user_on">用户启用</span></td>
            <td v-if="list.del==1"><span class="user_show user_off">用户禁用</span></td>
            <td>
              <router-link :to="{path:'/admin/useredit',query:{id:list.id}}">修改</router-link>
            </td>
          </tr>
        </table>
        <!--分页-->
        <ul class="pagination">
          <li v-if="current===1"><a class="banclick"><<</a></li>
          <li v-if="current>1"><a @click="upPage(current-1)"><<</a></li>
          <li v-for="index in indexs" :key="index">
            <a :class="{active:current===index}" @click="handleAddClass(index)">{{ index }}</a>
          </li>
          <li v-if="current!==total"><a @click="downPage(current+1)">>></a></li>
          <li v-if="current===total"><a class="banclick">>></a></li>
          <li><a href="#">共<i>{{ total }}</i>页</a></li>
        </ul>
      </div>
  </div>

</template>

<script>
export default {
  name: "adminUserList",
  data(){
    return {
      userlist:[],
      number:10,//每一页显示的条数
      isSel:false,//判断是否用于查询状态
      adminToken:'',//用户token
      total:0,//总页数
      current:1,//当前页
      userSearch:'',//搜索
      flag:false,//判断是否显示信息提示框
      delId:'',//存放待删除的ID
    }
  },
  computed:{
    indexs(){
      //定义开始的数字
      let left=1;
      //定义结束的数字
      let right=this.total;
      //存储返回值
      let arr=[];
      //显示页码数量
      let condition=5;
      //向上取整，就能获得中间的数字
      let middle=Math.ceil(condition/2);
      if(this.total>=condition){
        //在中间
        if(this.current>middle&&this.current<this.total-(middle-1)){
          left = this.current-(middle-1);
          right= this.current+(middle+1);
        }
        else{
          //在最左边或者在condititon的中间
          if (this.current<=middle){
            left=1;
            right=condition;
          }
          else{
            //在最右边
            right=this.total;
            left=this.total-(condition-1);
          }
        }
      }
      while(left<=right){
        arr.push(left);
        left++;
      }
      return arr;
    }
  },
  methods:{
    handleCancelBtn(){
      this.flag=false;
    },
    //请求用户列表
    getData(index){
      //请求列表数据
      this.$axios.get('/user/getlist',{
        params:{
          page:index,
          number:this.number,
          token:this.adminToken
        }
      }).then(response=>{
        let res=response.data;
        if(res.state===200){
          this.userlist=res.data;
          this.total=res.extra.total;
          this.current=res.extra.current;
          this.isSel=false;
        }
        else if(res.state===500){
          alert(res.msg);
          this.$router.push('/admin/login')
        }
        else{
          alert(res.msg);
        }
      }).catch(error=>{
        console.log(error);
      })
    },
    //单击分页，添加分页样式
    handleAddClass(page){
      if (page!==this.current){
        this.current=page;
        if(this.isSel){
          //处于查询状态，请求查询用户列表页面
          this.handleSearch(page);
        }
        else{
          //不处于查询状态，请求所有用户页面
          this.getData(page);
        }
      }
    },
    //上一页
    upPage(page){
      if(page>0){
        this.current=page;
        if(this.isSel){
          //处于查询状态，请求查询用户列表页面
          this.handleSearch(page);
        }
        else{
          //不处于查询状态，请求所有用户页面
          this.getData(page);
        }
      }
    },
    //下一页
    downPage(page){
      if(page<=this.total){
        this.current=page;
        if(this.isSel){
          //处于查询状态，请求查询用户列表页面
          this.handleSearch(page);
        }
        else{
          //不处于查询状态，请求所有用户页面
          this.getData(page);
        }
      }
    },
    //用户搜索
    handleSel(index){
      this.$axios.get('/user/search',{
        params:{
          keyword:this.userSearch,
          page:index,
          number:this.number,
          token:this.adminToken
        }
      }).then(response=>{
        let res=response.data;
        if(res.state===200){
          this.userlist=res.data;
          this.total=res.extra.total;
          this.cureent=res.existr.total;
          this.isSel=true;
        }
        else if(res.state===500){
          alert(res.msg);
          this.$router.push('/admin/login')
        }
        else{
          alert(res.msg);
        }
      }).catch(error =>{
        console.log(error);
      })
    }
  },
  created() {
    this.adminToken=this.getCookie('adminToken');
    this.getData(1);
  }
}
</script>

<style scoped>
  @import "../../static/css/home.css";
</style>
